import ProLayout from "@ant-design/pro-layout";
import { LogoutOutlined, GlobalOutlined } from "@ant-design/icons";
import React, { PropsWithChildren, useMemo, useState } from "react";
import { useIntl, setLocale, getLocale } from "@/i18next/method";
import { Link, useNavigate } from "react-router-dom";
import { __getRootElement } from "@/renderer";
import { GlobalProvider } from "@/models/global";

interface IProps {
  route: any;
  routes: any;
}

const BasicLayout: React.FC<PropsWithChildren<IProps>> = (props) => {
  const navigate = useNavigate();
  const { t } = useIntl();
  const { children } = props;
  const salveModel: any = null;
  const [language, setLanguage] = useState<string>(getLocale() || "zh-CN");
  const { theme } = useMemo(() => {
    let theme = "light";
    if (salveModel && salveModel.theme) {
      theme = salveModel.theme;
    }
    return { theme };
  }, [salveModel]);

  const route = useMemo(() => {
    let childArr: any[] = [];
    const getRoutes = (arr: any[]) => {
      arr.forEach((item) => {
        if (item.absPath === props.route.absPath) {
          childArr = item.children;
        } else {
          if (item.children) getRoutes(item.children);
        }
      });
    };
    getRoutes(props.routes);
    return {
      ...props.route,
      routes: childArr,
    };
  }, [props.route, props.routes]);
  return (
    <div style={{ backgroundColor: "#fff", height: "100vh" }}>
      <ProLayout
        route={route}
        onMenuHeaderClick={() => navigate("/layout")}
        menuDataRender={(routes) => {
          return routes;
        }}
        menuItemRender={(menuItemProps, defaultDom) => {
          if (
            menuItemProps.isUrl ||
            menuItemProps.children ||
            !menuItemProps.path
          ) {
            return defaultDom;
          }
          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        title="5T React Pro"
        menu={{
          collapsedShowGroupTitle: true,
        }}
        token={{
          colorBgAppListIconHover: "rgba(0,0,0,0.06)",
          colorTextAppListIconHover: "rgba(255,255,255,0.95)",
          colorTextAppListIcon: "rgba(255,255,255,0.85)",
          sider: {
            colorBgCollapsedButton: "#fff",
            colorTextCollapsedButtonHover: "rgba(0,0,0,0.65)",
            colorTextCollapsedButton: "rgba(0,0,0,0.45)",
            colorMenuBackground: "#004FD9",
            colorBgMenuItemCollapsedElevated: "rgba(0,0,0,0.85)",
            colorMenuItemDivider: "rgba(255,255,255,0.15)",
            colorBgMenuItemHover: "rgba(0,0,0,0.06)",
            colorBgMenuItemSelected: "rgba(0,0,0,0.15)",
            colorTextMenuSelected: "#fff",
            colorTextMenuItemHover: "rgba(255,255,255,0.75)",
            colorTextMenu: "rgba(255,255,255,0.75)",
            colorTextMenuSecondary: "rgba(255,255,255,0.65)",
            colorTextMenuTitle: "rgba(255,255,255,0.95)",
            colorTextMenuActive: "rgba(255,255,255,0.95)",
            colorTextSubMenuSelected: "#fff",
          },
        }}
      >
        <GlobalProvider
          value={{
            language,
          }}
        >
          {children}
        </GlobalProvider>
      </ProLayout>
    </div>
  );
};

export default BasicLayout;
